<template>
  <div class="home">
    <!-- <h1>Vue2 + TypeScript 示例</h1> -->
    <!-- <div>
      <p>计数器: {{ count }}</p>
      <Button type="primary" @click="increment">增加</Button>
    </div>
    <div class="user-info">
      <h2>用户信息</h2>
      <p>用户名: {{ userName }}</p>
      <p>年龄: {{ age }}</p>
      <Button @click="updateUser">更新用户信息</Button>
    </div> -->
    <!-- <i-circle :percent="80">
      <span class="demo-Circle-inner" style="font-size:24px">80%</span>
    </i-circle> -->
  </div>
</template>

<script lang="ts">
import { Component, Vue, Prop, Watch } from 'vue-property-decorator';
// import { State, Getter, Action } from 'vuex-class';
// import Cookies from 'js-cookie';
// import { Tsrv } from '@/services';

// interface User {
//   name: string;
//   age: number;
// }

@Component({
  components: {
  }
})
export default class Home extends Vue {
  // Vuex 状态和方法
  // @State(state => state.count) count!: number;
  // @Getter('getCount') readonly getCount!: number;
  // @Action('increment') incrementAction!: () => void;
  
  // // Props 示例
  // @Prop({ default: 'Guest' }) readonly propMessage!: string;
  
  // // 组件数据
  // private userName: string = '张三';
  // private age: number = 30;
  
  // // 计算属性
  // get userInfo(): string {
  //   return `${this.userName} (${this.age})`;
  // }
  
  // // 方法
  // increment(): void {
  //   this.incrementAction();
  // }
  
  // updateUser(): void {
  //   this.userName = '李四';
  //   this.age = 28;
  //   // 使用js-cookie保存数据
  //   Cookies.set('user', JSON.stringify({ name: this.userName, age: this.age }));
  // }
  
  // 监听器
  // @Watch('userName')
  // onUserNameChanged(newValue: string, oldValue: string): void {
  //   console.log(`用户名从 ${oldValue} 更改为 ${newValue}`);
  // }
  
  // 生命周期钩子
  mounted(): void {
    // 从cookie中获取用户数据
    // const userStr = Cookies.get('user');
    // if (userStr) {
    //   try {
    //     const user: User = JSON.parse(userStr);
    //     this.userName = user.name;
    //     this.age = user.age;
    //   } catch (e) {
    //     console.error('解析用户数据失败', e);
    //   }
    // }
  }
}
</script>

<style scoped>
.home {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}

.user-info {
  margin-top: 30px;
  padding: 20px;
  border: 1px solid #eee;
  border-radius: 5px;
}
</style> 